<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		<view class="top-background" v-if="platfrom!=='TOUTIAO'"></view>
		<view class="status_nav" v-if="platfrom!=='TOUTIAO'" :style="'height:' + statusBarHeight + 'px;'" :class="{'backClass':scrollFlag}"></view>
		<view v-if="platfrom!=='TOUTIAO'" :class="{'backClass':scrollFlag}" :style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+statusBarHeight+'px;'" class="Index_tab_top">
			<view class="scan-box">
				<image src="../../static/back.png" mode="aspectFill" @click="tapToBack('back')"></image>
			</view>
			<view class="title">提现</view>
		</view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'height:'+ (titleBarHeight+statusBarHeight) +'px;'"></view>
		<view v-if="platfrom!=='TOUTIAO'" :style="'width: 100vw;height:'+ (titleBarHeight+statusBarHeight +175)+'px;position: fixed;top: 0;z-index:-1;'">
			
		</view>
		
		
		
		<!-- 微信授权 -->
		<!-- <view class="authorization">
			<view class="left">
				<image src="https://imgs.ynz666.com/2025/05/15/ZGZjZjY0YzQ2ZjNjOTk5M2RlNzk5ODM2NmExZjViZDM=.png" mode="aspectFill" class="img"></image>
				<view class="name">
					绑定微信
				</view>
			</view>
			<view class="right">
				去绑定
			</view>
		</view> -->
		
		
		<!-- 身份信息 -->
		<view class="identity">
			<image src="https://imgs.ynz666.com/2025/05/15/YTdhNTU2NGFmOWRlNDg2ZDIwZGYyMzlhOThkNjQxYzY=.png" mode="aspectFill" class="identity_img"></image>
			<view class="identity_box">
				<view class="top">
					<view class="top_left">
						<view class="name">
							可提现金额
						</view>
						<view class="price">
							¥{{mineInfo.balance}}元
						</view>
					</view>
				</view>
				<view class="cen">
					<view class="name">
						输入提现金额
					</view>
					<view class="content_box">
						<view class="left">
							<view class="price_name">
								¥
							</view>
							<input type="number" class="price_input" @input="getMoney" :value="money" placeholder="请输入提现金额">
						</view>
						<view class="right" @click="allWithdrawal">
							全部提现
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="identity_text">
			<text class="text_color">未满50</text>提现每笔额外扣取<text class="text_color">0.5元</text>手续费，每日提现额度：2000 元
			
			<view class="withdraw_btn" @click="modifyOrder">
				立即提现
			</view>
		</view>
		
		<!-- 分类型 -->
		<view class="typeFun">
			<view class="name">
				收入/支出
			</view>
				 <!-- <view :class="navIndex==index?'item item_active':'item'" v-for="(item,index) in categorys" :key="index" @click="navClick(index,item.id)">{{item}}</view> -->
		</view>
		
		<view class="listFun">
			<!-- statusCode 3审核中 4审核通过 5提现异常 6提现成功  -->
			<view class="item" v-for="(item,index) in searchList" :key="index">
				<view class="item_box">
					<view class="top">
						<view class="top_left">
							<image src="https://imgs.ynz666.com/2025/05/15/YWY3YTRlMmQ4ZTU4YzBkOTUzMjE1NzFjNWNlNTNhMmI=.png" mode="aspectFill" class="img"v-if="item.statusCode==3||item.statusCode==4"></image>
							<image src="https://imgs.ynz666.com/2025/05/15/YWEzNmNiY2Q2NmU4YTFmMDNmNmYzNzBiZjZmZmE3NmY=.png" mode="aspectFill" class="img"v-if="item.statusCode==5"></image>
							<image src="https://imgs.ynz666.com/2025/05/15/YjY3ZGQwZGMwNGRhMzVkMzY3ZDJkNDZiNzZkNjg4ZmE=.png" mode="aspectFill" class="img"v-if="item.statusCode==6"></image>
							<view class="name">
								{{item.statusName}}
							</view>
						</view>
						<view class="top_right" v-if="item.changeFlag==1">
							+{{item.num}}
						</view>
						<view class="top_right" v-if="item.changeFlag==2">
							{{item.num}}
						</view>
					</view>
					<view class="cen">
						<view class="cen_left">
							提现时间：{{item.createdAt}}
						</view>
						<view class="cen_right" v-if="item.statusCode==4" @click="extractWx(item)">
							确认提现
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 标准版确认取消弹框 -->
		<view class="mask_Verify" v-if="modalVerify">
			<view class="maskFour_box">
				<view class="bj_box">
					<!-- <image
						src=""
						mode="scaleToFill" class="free_img"></image> -->
						<view class="box">
						  <view class="box_title">
						  	确认提现吗
						  </view>
							<view class="box_con">
							  未满50提现每笔额外扣取0.5元手续费
							</view>
							
							<view class="box_font">
								<view class="btn btn1" @click="cancelDelete()">
									关闭弹框
								</view>
								<view class="btn btn2" @click="verifyDelete()">
									确认提现
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
		
	
		
		
		
		
		
		<!-- <customTabbar :curNav="2" :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView'></customTabbar> -->
		
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		getSecKillList,
	} from '../../apis/index.js';
	import {
		walletInfo,walletCredits,walletWithdraw,walletWithdrawWechat
	} from '../../apis/my.js';
	
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import loading from '../../components/loading/loading.vue';
	
	export default {
		data() {
			return {
				loading:true,
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				mineInfo:{},
				distribution:{},
				scrollFlag:false,
				latitude: 0,
				longitude: 0,
				
				purchaseList:[
					{
						img:'',
						name:'徐点点不滴',
					  shop:'一点点经典口味波霸奶绿大杯'
					},
					{
						img:'',
						name:'刘打打飞',
					  shop:'明星不错大大大一样'
					}
				],//购买人轮播信息
				
				currentBanner:0,
				currentplat:0,
				likeAllList:[],//会员免费列表
				
				navOneList:[],
				
				categorys:['总明细','礼包明细','售卡明细','团购明细','团购明细'],
				navIndex:0,
				money:'',
				
				walletInfoData:{},
				par:{
					page: 1,
					pageSize: 10,
					type:0,
					creditType:'balance'
				},
				searchList:[],
				modalVerify:false,
			}
		},
		components: {
			customTabbar,
			loading
		},
		onPageScroll(e){
			if(e.scrollTop>0){
				this.scrollFlag = true;
			}
			if(e.scrollTop<=0){
				this.scrollFlag = false;
			}
		},
		onShow() {
			uni.hideTabBar();
			
			
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			
		},
		onLoad(){
			this.latitude = app.globalData.latitude;
			this.longitude = app.globalData.longitude;
			this.getUserInfo();
			
		},
		
		onReady() {
			uni.hideTabBar();
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
		},
		methods: {
			walletCreditsList(){
				let that = this;
				
				walletCredits(that.par).then(res=>{
					that.searchList = that.par.page == 1 ? res.data.List.map((item)=>{
						return Object.assign({}, item, {
							statusCode:that.transformCode(item.statusName),
						})
					}) : that.searchList.concat(res.data.List.map((item)=>{
						return Object.assign({}, item, {
							statusCode:that.transformCode(item.statusName),
						})
					}));
					that.isLastPage = res.data.lastPage;
					console.log(that.searchList,"that.searchList")
				})
			},
			getMoney(e){
				this.money = e.detail.value;
			},
			allWithdrawal(){
				this.money = this.mineInfo.balance
			},
			cancelDelete(){
				this.modalVerify=false
			},
			modifyOrder(){
				this.modalVerify=true
			},
			// 确认提现
			verifyDelete(){
				
				if (!this.money || this.money > (this.mineInfo.balance ) || this.money < 0) {
				  wx.showToast({
				    title: '您输入的提现金额有误',
				    icon:"none"
				  })
				  return
				}
				if (this.money < 1) {
					wx.showToast({
						title: '提现金额不能小于1元',
						icon:"none"
					})
					return
				}
				
				let data={
					amount: this.money,
					platform: "user",
					type: 2
				}
				
				console.log(data,"data")
				let that = this;
				walletWithdraw(data).then(res=>{
					if(res.code==0){
						uni.showToast({
						  title: '申请提取成功，等待审核',
						  icon:"none"
						})
						that.modalVerify=false
						that.par.page=1;
						that.searchList=[];
						// this.walletCreditsList();
						app.getUserInfo(function(lRes) {
							that.mineInfo = lRes;
							that.loading=false
							uni.setStorageSync('mineInfo', lRes);
							that.walletCreditsList();
						})
					}else{
						uni.showToast({
						  title: res.message,
						  icon:"none"
						})
						that.modalVerify=false
					}
				})
			},
			extractWx(item){
				console.log(11111)
				let that = this;
				walletWithdrawWechat({walletCreditsLogId:item.id}).then(res=>{
					if (wx.canIUse('requestMerchantTransfer')) {
					  wx.requestMerchantTransfer({
					    mchId: res.data.mch_id,
					    appId: 'wx3b5828fe62b72a24',
							package: res.data.package_info,
					    success: (res) => {
					      // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
								that.par.page=1;
								that.searchList=[];
								that.walletCreditsList();
					      console.log('success:', res);
					    },
					    fail: (res) => {
					      console.log('fail:', res);
								that.par.page=1;
								that.searchList=[];
								that.walletCreditsList();
					    },
					  });
					} else {
					  wx.showModal({
					    content: '你的微信版本过低，请更新至最新版本。',
					    showCancel: false,
					  });
					}
				
				})
			},
			transformCode(status){
				
					switch(status){
						case '处理中':
						return 1;
						break;
						case '打款中':
						return 2;
						break;
						case '审核中':
						return 3;
						break;
						case '审核通过':
						return 4;
						break;
						case '提现异常':
						return 5;
						break;
						case '提现成功':
						return 6;
						break;
						default:
						break;
					}
				
			},
			navClick(index,id){
				this.navIndex=index
				this.isLastPage = false;
			},
			// 返回按钮
			tapToBack(page) {
				console.log(page,"111")
				switch(page){
					case 'index':
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
						})
					break;
				}
			},
			// 手机号授权
			onGetPhoneNumber(e){
				console.log(e,"eeeee")
				let that = this;
				app.GetMobile(e,function(e){
					
					that.getUserInfo();
					
				});
			},
			onGetPhoneNumberTwo(e){
				let that = this;
				app.GetMobile(e,function(e){
					
				
				});
			},
			
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					that.distribution=lRes.distribution
					that.loading=false
					uni.setStorageSync('mineInfo', lRes);
					that.walletCreditsList();
				})
			},
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
			
			// 跳转
			JumpPage(page) {
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '/pages/' + page + '/' + page
						})
						break;
					default:
						uni.navigateTo({
							url: `../${page}/${page}`
						})
						break;
				}
			},
			
		},
		onReachBottom() {
			if (!this.isLastPage) {
				console.log(11)
				this.par.page++;
				this.walletCreditsList();
			}
		},
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	.top-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 622rpx;
		z-index: -1;
		// background: linear-gradient( #FFD3DB,#fff);
		background: linear-gradient( #FFD3DB,#f9f9f9);
		// background: radial-gradient( 43% 146% at 92% 8%, #FFD3DB 0%, rgba(255,244,243,0) 100%);
		// opacity: 0.5;
		// filter: blur(20rpx);
		border-radius: 0 0 20rpx 20rpx;
	}
	.status_nav {
		width:100vw;
		position:fixed;
		top:0;
		left:0;
		z-index:2;
	}
	
	.backClass {
		background-color: #fff!important;
	}
	//  自定也首页顶部导航
	.Index_tab_top {
		z-index: 3;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		.scan-box {
			margin-left: 30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		
			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 4rpx;
			}
		
			view {
				margin-left: 15rpx;
			}
		}
		.title {
			width: 200rpx;
			text-align: center;
			position: absolute;
			left: 50%;margin-left: -100rpx;
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
	}



 
.authorization{
	margin: 28rpx 28rpx 0;
	height: 74rpx;
	background: rgba(255,255,255,0.96);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	border: 2rpx solid #FFD9D9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.left{
		display: flex;
		align-items: center;
		padding-left: 24rpx;
		.img{
			width: 52rpx;
			height: 52rpx;
		}
		.name{
			font-weight: 400;
			font-size: 28rpx;
			color: #FF4D53;
			padding-left: 10rpx;
		}
	}
	.right{
		margin-right: 8rpx;
		width: 124rpx;
		height: 60rpx;
		background: #FF4D53;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
}

 
	
	
	.identity{
		margin: 28rpx 28rpx 0;
		height: 432rpx;
		position: relative;
		.identity_img{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		.identity_box{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			border-radius: 10rpx;
			.top{
				padding: 56rpx 52rpx 38rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.top_left{
					display: flex;
					flex-direction: column;
					.name{
						font-weight: 400;
						font-size: 28rpx;
						color: #727272;
					}
					.price{
						font-weight: 500;
						font-size: 52rpx;
						color: #000000;
						padding-top: 4rpx;
					}
				}
			}
			.cen{
				width: 590rpx;
				height: 172rpx;
				padding: 20rpx 20rpx 0;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin: 0 auto;
				.name{
					font-size: 28rpx;
					color: #727272;
				}
				.content_box{
					border-bottom: 1rpx solid #F2F2F2;
					display: flex;
					align-items: center;
					.left{
						flex: 1;
						display: flex;
						align-items: center;
						.price_name{
							font-weight: 400;
							font-size: 72rpx;
							color: #000000;
						}
						.price_input{
							padding-left: 30rpx;
						}
					}
					.right{
						font-weight: 400;
						font-size: 24rpx;
						color: #FF5F25;
					}
				}
			}
			
		}
	}
	.identity_text{
		font-size: 22rpx;
		color: #727272;
		margin: 10rpx 28rpx 0;
		.text_color{
			color: #FF5F25;
		}
		.withdraw_btn{
			width: 694rpx;
			height: 100rpx;
			background: #FF5C04;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 12rpx;
		}
	}
	
	.typeFun{
		padding: 28rpx 0 28rpx 28rpx;
		display: flex;
		display: -webkit-box;
		overflow-x: auto;
		.item{
			padding: 0 24rpx;
			height: 48rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #D8D8D8;
			font-weight: 400;
			font-size: 28rpx;
			color: #727272;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 28rpx;
		}
		.item_active{
			border: 2rpx solid #FF5F25;
			font-weight: bold;
			color: #FF5F25;
		}
		.name{
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
	}
	
	.listFun{
		.item{
			width: 694rpx;
			height: 190rpx;
			background: #FFFFFF;
			margin: auto;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.item_box{
				height: 100%;
				padding: 28rpx 32rpx;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.top_left{
						display: flex;
						align-items: center;
						.img{
							width: 44rpx;
							height: 44rpx;
						}
						.name{
							padding-left: 10rpx;
							font-size: 32rpx;
							color: #000000;
						}
					}
					
					.top_right{
						font-weight: 500;
						font-size: 64rpx;
						color: #FFB566;
					}
				}
				.cen{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cen_left{
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
					}
					.cen_right{
						width: 144rpx;
						height: 48rpx;
						background: #FF4D01;
						border-radius: 54rpx 54rpx 54rpx 54rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	
	
	
	
	.mask_Verify{
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			background-color: rgba(0, 0, 0, 0.65);
				
			.maskFour_box {
				width: 604rpx;
				overflow: hidden;
				position: absolute;
				top: 50%;
				transform: translateY(-60%);
				left: 50%;
				margin-left: -302rpx;
				border-radius: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.bj_box{
					background: #fff;
					width: 604rpx;
					height: 358rpx;
					position: relative;
					.free_img {
						width: 604rpx;
						height: 358rpx;
					}
					.box{
						width: 604rpx;
						height: 358rpx;
						position: absolute;
						top: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						.box_title{
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #181818;
							padding-top: 40rpx;
						}
						.box_con{
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
							line-height: 40rpx;
							margin: 20rpx 76rpx 0;
						}
						.box_font{
							margin: 44rpx 0 0;
							width: 540rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.btn{
								width: 252rpx;
								height: 82rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.btn1{
								background: #FFFFFF;
								border-radius: 42rpx;
								border: 2rpx solid #DEDEDE;
								font-weight: bold;
								font-size: 30rpx;
								color: #181818;
							}
							.btn2{
								background: linear-gradient( 225deg, #FE4602 0%, #FF8414 100%);
								border-radius: 42rpx;
								border: 2rpx solid #FF8414;
								font-weight: bold;
								font-size: 30rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	
	
	
}
</style>
